<template>
  <div class="table_index xyw_container">
    <com-table
      :pagination="pagination"
      :header-data="headerData"
      :table-data="tableData"
      @pageChange="handleCurrentChange"
      @pageCountChange="handleSizeChange"
      @btnClick="tableBtnClick"
      @getDataList="initData"/>
  </div>
</template>

<script lang="ts">
import comTable from '@/components/Table.vue';
import axios from '@/utils/request';
import { Component, Vue } from 'vue-property-decorator';
@Component({
  components: { comTable }
})
export default class TableIndex extends Vue {
  pagination = {
    currentPage: 1,
    pageSize: 10,
    layout: 'total, prev, pager, next',
    total: 0
  }
  tableData = [
    {
      id: 'JCK201901000',
      type: '进口',
      projectName: 'Daiquiri机器和维修配件进口',
      c3Num: 'A150431010099',
      overDate: '2020/4/1',
      price: '10000',
      freightNum: '5050101925',
      invoiceNum: 'B5-6001',
      valueAddedTax: '1257.32',
      tariff: '0',
      department: 'RITS PKC 6th Development',
      receivePerson: '张三',
      date: '2015/4/1',
      status: '终了（费用报销完毕）'
    }
  ]
  headerData = [
    { label: '入院编号', prop: 'checkinNo' },
    { label: '老人姓名', prop: 'elderName' },
    { label: '性别', prop: 'gender' },
    { label: '年龄', prop: 'age' },
    // {
    //   label: "过期日期",
    //   prop: "date",
    //
    //   class: "red",
    //   format: data => {
    //     return this.$moment(data.date).format("YYYY-MM-DD");
    //   }
    // },
    { label: '户籍类型', prop: 'registerType' },
    { label: '房间床位', prop: 'roomName' },
    { label: '院方护理等级', prop: 'nursingLevel' },
    { label: '出生日期', prop: 'birthDay' },
    { label: '入住时间', prop: 'checkinDate' },
    { label: '接待人', prop: 'creatorName' },
    { label: '状态', prop: 'status' },
    { label: '同步区网', prop: 'syncStatus' },
    {
      label: '编辑',
      type: 'btn',
      operationData: [
        { label: '编辑', type: 'primary', icon: 'el-icon-edit' },
        { label: '删除', type: 'danger', icon: 'el-icon-delete' }
      ]
    }
  ]
  created(): void {
    this.initData();
  }
  initData():void {
    axios
      .fetch('elderServer', '/elderInfo/all', {
        pageIndex: this.pagination.currentPage,
        pageSize: this.pagination.pageSize
      })
      .then(res => {
        this.tableData = res.data;
        this.pagination.total = res.total;
      });
  }
  handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
    this.pagination.pageSize = val;
    this.pagination.currentPage = 1;
    this.initData();
  }
  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
    this.pagination.currentPage = val;
    this.initData();
  }
  /**
   * tableBtnClick
   */
  tableBtnClick(item, index, rowData) {
    console.log(item);
    console.log(item.lable);
    console.log(index);
    console.log(rowData);
    console.log(11111111111);
  }
  // 分页相关
  pageChange(val) {
    console.log(`第${val}页`);
    this.pagination.currentPage = val;
  }
  pageCountChange(val) {
    console.log(`每页${val}条`);
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-table {
  .red {
    color: red;
  }
}
</style>
